<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row>
        <el-col :span="6">
          <el-input v-model="departmentName" @keyup.enter.native="" placeholder="请输入部门名查询">
            <template slot="append">

              <el-button class="el-icon-search" type="primary" @click="findDepartmentList"></el-button>

            </template>
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button class="add" @click="reset" type="primary">重置</el-button>
        </el-col>
        <el-col :span="2">
          <el-button class="add" type="warning" @click="addDept">添加</el-button>
        </el-col>
      </el-row>

      <el-table
          height="700px"
          border
          :row-key="tableData.id"
          max-height="700px"
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="ID"
            width="100">
        </el-table-column>
        <el-table-column
            prop="name"
            label="部门名"
            width="120">
        </el-table-column>
        <el-table-column
            prop="deptCount"
            label="部门人数"
            width="80"
            align="center">
          <template slot-scope="scope">
            <el-tag type="success">{{ scope.row.deptCount }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="phone"
            label="电话"
            width="120">
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间"
            width="180">
        </el-table-column>
        <el-table-column
            prop="modifiedTime"
            label="修改时间"
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="办公地点"
            width=""
            align="center">

        </el-table-column>

        <el-table-column
            align="center"
            prop=""
            label="操作"
            width="200">
          <template slot-scope="tableData">
            <el-button type="success" @click="resetDept(tableData.row)" size="mini" icon="el-icon-s-tools" plain>编辑
            </el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteDept(tableData.row)" plain>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>


    </el-card>
    <!--弹窗-->
    <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="30%"
    >

      <el-form ref="elForm" :model="department" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="department.name" placeholder="请输入部门名称" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="办公地点" prop="address">
          <el-input v-model="department.address" placeholder="请输入办公地点" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="department.phone" placeholder="请输入联系电话" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="onClose">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
import {findDeptAndCount, deleteDeptById,addDept,resetDept} from "@/network/system/dept";

export default {
  name: "Departments",
  data() {
    return {
      tableData: [],//部门列表
      departmentName: '',
      dialogVisible: false,//控制弹窗
      dialogTitle: '',//弹窗标题
      department: {
        id: '',
        name: '',
        address: '',
        phone: ''
      },
      rules: {
        name: [{
          required: true,
          message: '请输入部门名称',
          trigger: 'blur'
        }],
        address: [{
          required: true,
          message: '请输入工作地点',
          trigger: 'blur'
        }],
        phone: [{
          required: true,
          message: '请输入联系电话',
          trigger: 'blur'
        }],
      }
    }
  },
  created() {
    this.findDepartmentList()
  },
  methods: {
    reset() {
      this.departmentName = ''
    },
    findDepartmentList() {
      findDeptAndCount().then((res) => {
        this.tableData = res.data.deptList
      })
    },
    /*删除*/
    deleteDept(data) {
      this.$confirm('此操作将永久删除 ' + data.name + ' , 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {

        deleteDeptById(data.id).then(() => {
          this.$message({
            type: 'success',
            message: '删除部门成功!'
          });
        }).catch((res) => {
          this.$message({
            type: 'info',
            message: res.message
          });
        })

        this.findDepartmentList()

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
    ,
    //关闭窗口
    onClose() {
      this.dialogVisible = false
      this.dialogTitle = ''

     this.department={}

    },
    //添加部门
    addDept() {
      this.dialogTitle = "添加部门"
      this.dialogVisible = true
      this.department.id=''

    },
    //修改部门
    resetDept(deptInfo) {
      this.dialogTitle = "修改部门"
      this.dialogVisible = true
      this.department=deptInfo
    },
    submit() {
      //判断是否需要ID
      if (this.department.id !== '') {

        resetDept(this.department).then(() => {
          this.findDepartmentList()

          this.$message({
            type: 'success',
            message: '修改部门成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: "修改部门失败"
          });
        })

      } else {
        //添加
        addDept(this.department).then(() => {
          this.findDepartmentList()

          this.$message({
            type: 'success',
            message: '添加部门成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: "添加部门失败"
          });
        })

      }
      //关闭窗口
      this.onClose();
      //刷新列表
    },

  }


}
</script>

<style scoped>

</style>